<template>
  <div class="information">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="我提交的" name="1">
        <PropTable
          :columns="column"
          :data="list"
          :total="total"
          :show="false"
          @reset="reset"
          @onSubmit="onSubmit"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
          @exportExcelAction="exportExcelAction"
        >
          <template v-slot:processTypeId="scope">
            {{ processTypeFn(scope.row.processTypeId) }}
          </template>
          <template v-slot:operation="scope">
            <div style="display: flex; justify-content: center">
              <!-- <el-button
                link
                type="primary"
                icon="Message"
                @click="approvalEdit(scope.row)"
                v-if="scope.row.state === '未审批'"
                >编辑
              </el-button> -->
              <el-button
                link
                type="primary"
                icon="Message"
                @click="convertedDetail(scope.row)"
                >详情
              </el-button>
            </div>
          </template>
        </PropTable>
      </el-tab-pane>
      <el-tab-pane label="待我审批" name="2">
        <PropTable
          :columns="columns"
          :data="lists"
          :total="total"
          :show="false"
          @reset="reset"
          @onSubmit="onSubmit"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
          @exportExcelAction="exportExcelAction"
        >
          <template v-slot:processTypeId="scope">
            {{ processTypeFn(scope.row.processTypeId) }}
          </template>
          <template v-slot:operation="scope">
            <div
              style="
                width: 100px;
                margin: 0 auto;
                display: flex;
                justify-content: flex-end;
              "
            >
              <el-button
                link
                type="primary"
                icon="Message"
                @click="ReviewDetail(scope.row)"
                v-if="userStore.rolescode!=15"
                >审批
              </el-button>
            </div>
          </template>
        </PropTable>
      </el-tab-pane>
      <el-tab-pane label="我已审批" name="3">
        <PropTable
          :columns="columnss"
          :data="listss"
          :total="total"
          :show="false"
          @reset="reset"
          @onSubmit="onSubmit"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        >
          <template v-slot:processTypeId="scope">
            {{ processTypeFn(scope.row.processTypeId) }}
          </template>
          <template v-slot:operation="scope">
            <div
              style="
                width: 100px;
                margin: 0 auto;
                display: flex;
                justify-content: flex-end;
              "
            >
              <el-button
                link
                type="primary"
                icon="Message"
                @click="detail(scope.row)"
                >详情
              </el-button>
              <el-button
                link
                type="danger"
                icon="Delete"
                @click="handeleRevoke(scope.row)"
                v-if="userStore.rolescode!=15"
                >撤回
              </el-button>
            </div>
          </template>
        </PropTable>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
//@ts-ignore
import PropTable from "@/components/Table/PropTable/index";
import { useRouter, onBeforeRouteLeave, useRoute } from "vue-router";
//@ts-ignore
import {
  approvalType,
  withdrawApi,
} from "@/api/approvalManagement/approvaType";
import Cookies from "js-cookie";
import useUserStore from "../../store/modules/user";
const userStore = useUserStore();
const loading = ref(true);
const router = useRouter();
const route = useRoute();
//@ts-ignore
const { proxy } = getCurrentInstance();
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);

let activeName = ref("1");
let activeIndex = ref("");
let paramsSubmit;
let searchType = ref("");
const handleClick = async (tab, event) => {
  Cookies.set("activeSpTab", tab.props.name);
  Cookies.set("activeSpIndex", tab.index);

  //console.log( Cookies.set("activeSpTab", tab.props.name),'----ppp--')

  activeName.value = tab.props.name;
  activeIndex.value = tab.index;

  // console.log(tab.index,'=---tab.index---')

  if (tab.index === "0") {
    searchType.value = "1";
  } else if (tab.index === "1") {
    searchType.value = "2";
  } else if (tab.index === "2") {
    searchType.value = "3";
  }

  await getApprovalType();
};
const optionsList = [
  {
    value: "1",
    label: "项目信息审批",
  },
  {
    value: "10",
    label: "项目立项审批",
  },
  {
    value: "12",
    label: "项目转立项审批",
  },
  {
    value: "3",
    label: "项目归档审批",
  },
  // {
  //   value: "4",
  //   label: "项目复盘审批",
  // },
  {
    value: "5",
    label: "日报审批",
  },
  {
    value: "6",
    label: "周报审批",
  },
  {
    value: "7",
    label: "月报审批",
  },
  {
    value: "11",
    label: "任务审批",
  },
  {
    value: "2",
    label: "成果交付审批",
  },
  {
    value: "15",
    label: "合同审批",
  },

  {
    value: "16",
    label: "项目日志审批",
  },
  // {
  //   value: "9",
  //   label: "回款进度审批",
  // },
];
const column = [
  {
    name: "checkName",
    label: "审批名称",
    inSearch: true,
    valueType: "input",
  },
  {
    name: "processTypeId",
    label: "审批类型",
    inSearch: true,
    valueType: "select",
    options: optionsList,
    slot: true,
  },
  {
    name: "state",
    label: "审批状态",
  },
  { name: "approver", label: "审批人" },
  {
    name: "createTime",
    label: "提交时间",
    width: 200,
  },
  {
    name: "updateTime",
    label: "审批时间",
    width: 200,
  },
  {
    name: "result",
    label: "审批结果",
  },
  {
    name: "operation",
    slot: true,
    fixed: "right",
    width: 200,
    label: "操作",
  },
];
const columns = [
  {
    name: "checkName",
    label: "审批名称",
    inSearch: true,
    valueType: "input",
  },
  {
    name: "processTypeId",
    label: "审批类型",
    inSearch: true,
    valueType: "select",
    options: optionsList,
    slot: true,
  },
  { name: "submitName", label: "提交人" },
  {
    name: "createTime",
    label: "提交时间",
  },
  {
    name: "operation",
    slot: true,
    fixed: "right",
    width: 300,
    label: "操作",
  },
];
const columnss = [
  {
    name: "checkName",
    label: "审批名称",
    inSearch: true,
    valueType: "input",
  },
  {
    name: "processTypeId",
    label: "审批类型",
    inSearch: true,
    valueType: "select",
    options: optionsList,
    slot: true,
  },
  {
    name: "state",
    label: "审批状态",
  },
  { name: "approver", label: "审批人" },
  {
    name: "createTime",
    label: "提交时间",
  },
  {
    name: "updateTime",
    label: "审批时间",
  },
  {
    name: "result",
    label: "审批结果",
  },
  {
    name: "operation",
    slot: true,
    fixed: "right",
    width: 300,
    label: "操作",
  },
];
// 处理审批类型
const processTypeFn = (value) => {
  let conversion = optionsList.find((item) => item.value === value);
  return conversion ? conversion.label : "";
};
// 审批查询
const list = ref([]);
const lists = ref([]);
const listss = ref([]);
const getApprovalType = async () => {
  let params = {
    pageNum: pageNum.value,
    searchType: searchType.value,
    pageSize: pageSize.value,
  };
  let data = {
    searchType: searchType.value,
  };
  if (paramsSubmit) {
    for (let key in paramsSubmit) {
      if (paramsSubmit[key]) {
        data[key] = paramsSubmit[key];
      }
    }
  }
  const res = await approvalType(params, data);
  if (res.code === 200) {
    if (activeName.value === "1") {
      list.value = res.rows;
      total.value = res.total;
    } else if (activeName.value === "2") {
      lists.value = res.rows;
      total.value = res.total;
    } else if (activeName.value === "3") {
      listss.value = res.rows;
      total.value = res.total;
    }
  } else {
    ElMessage.error(res.msg);
  }
};
// 我提交的详情按钮
const convertedDetail = (row) => {
  Cookies.set("activeSpTab", activeName.value);
  Cookies.set(
    "activeSpIndex",
    activeIndex.value ? activeIndex.value : Cookies.get("activeSpIndex")
  );
  if (row.processTypeId === "1") {
    router.push({
      path: "/myProject/conversion-info/info",
      query: { planId: row.dataId, name: "3", showDetails: "2" },
    });
  } else if (row.processTypeId === "2") {
    router.push({
      path: "/taskManage/manage-add/add",
      query: { taskId: row.dataId, name: "3", taskDetails: "2" },
    });
  } else if (row.processTypeId === "3") {
    router.push({
      path: "/myProject/archive-info/add",
      query: {
        name: "5",
        state: 2,
        archivistId: row.dataId,
      },
    });
  } else if (row.processTypeId === "4") {
    router.push({
      path: "/myProject/review/again",
      query: { id: row.dataId, name: "3" },
    });
  } else if (row.processTypeId === "5") {
    router.push({
      // 日报
      path: "/myProject/information-info/details",
      query: {
        id: row.dataId,
        type: 1,
        name: "3",
        myDataCheck: row.myDataCheck,
      },
    });
  } else if (row.processTypeId === "6") {
    // 周报
    router.push({
      // 日报
      path: "/myProject/information-info/details",
      query: {
        id: row.dataId,
        type: 2,
        name: "3",
        myDataCheck: row.myDataCheck,
      },
    });
  } else if (row.processTypeId === "7") {
    // 月报
    router.push({
      // 日报
      path: "/myProject/information-info/details",
      query: {
        id: row.dataId,
        type: 3,
        name: "3",
        myDataCheck: row.myDataCheck,
      },
    });
  } else if (row.processTypeId === "8") {
    router.push({
      path: "/returned/returned-add/add",
      query: { name: "5", id: row.dataId },
    });
  } else if (row.processTypeId === "9") {
    router.push({
      path: "/returned/returned-add/add",
      query: { name: "5", id: row.dataId, show: 1 },
    });
  } else if (row.processTypeId === "10") {
    // 项目立项审批
    router.push({
      path: "/myProject/approval/edit",
      query: { name: "3", id: row.dataId },
    });
  } else if (row.processTypeId === "11") {
    router.push({
      path: "/taskManage/manage-add/add",
      query: { taskId: row.dataId, name: "3", approvalTask: "1" },
    });
  } else if (row.processTypeId === "12") {
    // 项目转立项审批
    router.push({
      path: "/myProject/conversion-info/info",
      query: { name: "3", id: row.dataId, show: "2" },
    });
  } else if (row.processTypeId === "15") {
    // 合同审批
    router.push({
      path: "/contract/add/add",
      query: { name: "3", id: row.dataId },
    });
  } else {
    router.push({
      path: "/notice/add/noticeAdd",
      query: { name: "3", id: row.dataId },
    });
  }
};
// 我提交的编辑按钮
const approvalEdit = (row) => {
  Cookies.set("activeSpTab", activeName.value);
  Cookies.set(
    "activeSpIndex",
    activeIndex.value ? activeIndex.value : Cookies.get("activeSpIndex")
  );
  if (row.processTypeId === "1") {
    router.push({
      path: "/myProject/conversion-info/info",
      query: { planId: row.dataId, name: "2", info: "1" },
    });
  } else if (row.processTypeId === "2") {
    router.push({
      path: "/taskManage/manage-add/add",
      query: { taskId: row.dataId, name: 2, taskDetails: "2" },
    });
  } else if (row.processTypeId === "3") {
    router.push({
      path: "/myProject/archive-info/add",
      query: {
        name: 2,
        state: 2,
        archivistId: row.dataId,
      },
    });
  } else if (row.processTypeId === "4") {
    router.push({
      path: "/myProject/review/again",
      query: { id: row.dataId, name: "2" },
    });
  } else if (row.processTypeId === "5") {
    router.push({
      // 日报
      path: "/myProject/information-info/details",
      query: { id: row.dataId, type: 1 },
    });
  } else if (row.processTypeId === "6") {
    // 周报
    router.push({
      // 日报
      path: "/myProject/information-info/details",
      query: { id: row.dataId, type: 2 },
    });
  } else if (row.processTypeId === "7") {
    // 月报
    router.push({
      // 日报
      path: "/myProject/information-info/details",
      query: { id: row.dataId, type: 3 },
    });
  } else if (row.processTypeId === "8") {
    router.push({
      path: "/returned/returned-add/add",
      query: { name: 2, id: row.dataId },
    });
  } else if (row.processTypeId === "9") {
    router.push({
      path: "/returned/returned-add/add",
      query: { name: "5", id: row.dataId, show: 1 },
    });
  } else if (row.processTypeId === "10") {
    // 项目立项审批
    router.push({
      path: "/myProject/approval/edit",
      query: { name: "2", id: row.dataId },
    });
  } else {
    router.push({
      path: "/taskManage/manage-add/add",
      query: { taskId: row.dataId, name: "2", approvalTask: "1" },
    });
  }
};
// 待我审批的审批按钮
const ReviewDetail = (row) => {
  Cookies.set("activeSpTab", activeName.value);

  Cookies.set(
    "activeSpIndex",
    activeIndex.value ? activeIndex.value : Cookies.get("activeSpIndex")
  );

  // console.log(row, "--row--");
  if (row.processTypeId === "1") {
    router.push({
      path: "/myProject/conversion-info/info",
      query: { planId: row.dataId, name: "6", info: "1" },
    });
  } else if (row.processTypeId === "2") {
    router.push({
      // 成果交付审批
      path: "/taskManage/manage-add/add",
      query: { taskId: row.dataId, name: "6", task: "2" },
    });
  } else if (row.processTypeId === "3") {
    router.push({
      path: "/myProject/archive-info/add",
      query: {
        name: 6,
        state: 2,
        archivistId: row.dataId,
      },
    });
  } else if (row.processTypeId === "4") {
    router.push({
      path: "/myProject/review/again",
      query: { id: row.dataId, name: "6" },
    });
  } else if (row.processTypeId === "5") {
    router.push({
      // 日报
      path: "/myProject/information-info/details",
      query: {
        id: row.dataId,
        type: 1,
        name: "6",
        myDataCheck: row.myDataCheck,
      },
    });
  } else if (row.processTypeId === "6") {
    // 周报
    router.push({
      path: "/myProject/information-info/details",
      query: {
        id: row.dataId,
        type: 2,
        name: "6",
        myDataCheck: row.myDataCheck,
      },
    });
  } else if (row.processTypeId === "7") {
    // 月报
    router.push({
      path: "/myProject/information-info/details",
      query: {
        id: row.dataId,
        type: 3,
        name: "6",
        myDataCheck: row.myDataCheck,
      },
    });
  } else if (row.processTypeId === "8") {
    // 计划审批
    router.push({
      path: "/returned/returned-add/add",
      query: { name: 6, id: row.dataId, show: 2 },
    });
  } else if (row.processTypeId === "9") {
    // 进度审批
    router.push({
      path: "/returned/returned-add/add",
      query: { name: "6", id: row.dataId, show: 1 },
    });
  } else if (row.processTypeId === "10") {
    // 项目立项审批
    router.push({
      path: "/myProject/approval/edit",
      query: { name: "6", id: row.dataId },
    });
  } else if (row.processTypeId === "11") {
    router.push({
      path: "/taskManage/manage-add/add",
      query: { taskId: row.dataId, name: "6", approvalTask: "1" },
    });
  } else if (row.processTypeId === "12") {
    // 项目转立项审批
    router.push({
      path: "/myProject/conversion-info/info",
      query: { name: "6", id: row.dataId, show: "1" },
    });
  } else if(row.processTypeId === "15" ) {
    // 合同审批
    router.push({
      path: "/contract/add/add",
      query: { name: "6", id: row.dataId },
    });
  }else {
    router.push({
      path: "/notice/add/noticeAdd",
      query: { name: "6", id: row.dataId,logState : "-1" },
    })
  }
};
// 我已审批的详情按钮
const detail = (row) => {
  // console.log(activeName.value);
  Cookies.set("activeSpTab", activeName.value);
  Cookies.set(
    "activeSpIndex",
    activeIndex.value ? activeIndex.value : Cookies.get("activeSpIndex")
  );
  if (row.processTypeId === "1") {
    router.push({
      path: "/myProject/conversion-info/info",
      query: { planId: row.dataId, name: "5", info: "1" },
    });
  } else if (row.processTypeId === "2") {
    router.push({
      path: "/taskManage/manage-add/add",
      query: { taskId: row.dataId, name: "5", taskDetails: "2" },
    });
  } else if (row.processTypeId === "3") {
    router.push({
      path: "/myProject/archive-info/add",
      query: {
        name: "5",
        state: 2,
        archivistId: row.dataId,
      },
    });
  } else if (row.processTypeId === "4") {
    router.push({
      path: "/myProject/review/again",
      query: { id: row.dataId, name: "5" },
    });
  } else if (row.processTypeId === "5") {
    router.push({
      // 日报
      path: "/myProject/information-info/details",
      query: {
        id: row.dataId,
        type: 1,
        name: "5",
        myDataCheck: row.myDataCheck,
      },
    });
  } else if (row.processTypeId === "6") {
    // 周报
    router.push({
      // 日报
      path: "/myProject/information-info/details",
      query: {
        id: row.dataId,
        type: 2,
        name: "5",
        myDataCheck: row.myDataCheck,
      },
    });
  } else if (row.processTypeId === "7") {
    // 月报
    router.push({
      // 日报
      path: "/myProject/information-info/details",
      query: {
        id: row.dataId,
        type: 3,
        name: "5",
        myDataCheck: row.myDataCheck,
      },
    });
  } else if (row.processTypeId === "8") {
    //回款计划审批
    router.push({
      path: "/returned/returned-add/add",
      query: { name: "5", id: row.dataId, show: 2 },
    });
  } else if (row.processTypeId === "9") {
    // 回款进度
    router.push({
      path: "/returned/returned-add/add",
      query: { name: "5", id: row.dataId, show: 1 },
    });
  } else if (row.processTypeId === "10") {
    // 项目立项审批
    router.push({
      path: "/myProject/approval/edit",
      query: { name: "5", id: row.dataId },
    });
  } else if (row.processTypeId === "11") {
    router.push({
      path: "/taskManage/manage-add/add",
      query: { taskId: row.dataId, name: "5", approvalTask: "1" },
    });
  } else if (row.processTypeId === "12") {
    // 项目转立项审批
    router.push({
      path: "/myProject/conversion-info/info",
      query: { name: "5", id: row.dataId, shows: "1" },
    });
  } else if(row.processTypeId === "15"){
    // 合同审批
    router.push({
      path: "/contract/add/add",
      query: { name: "5", id: row.dataId },
    });
  }else{
    router.push({
      path: "/notice/add/noticeAdd",
      query: { name: "5", id: row.dataId,logState:"-1" },
    });

  }
};
const reset = () => {
  getApprovalType();
};
const onSubmit = (val) => {
  paramsSubmit = val;
  getApprovalType();
};
const handleSizeChange = (valueSise) => {
  pageSize.value = valueSise;
  getApprovalType();
};
const handleCurrentChange = (valuePage) => {
  pageNum.value = valuePage;
  getApprovalType();
};

const exportExcelAction = () => {};

// 撤回
const handeleRevoke = (row) => {
  ElMessageBox.confirm("确定要撤回吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      if (row && row.id) {
        console.log(row.id);
        const result = await withdrawApi(row.id);
        if (result.code === 200) {
          // 删除成功的提示
          ElMessage.success(result.msg);
          // getApprovalType();
          // conversionData();
        }
      }
    })
    .catch((err) => {
      // 用户点击取消执行的操作
      ElMessage.error("取消");
      // console.log('取消');
    });
};

onBeforeRouteLeave((to, from, next) => {
  //
  const allowedPaths = [
    "/examine",
    "/myProject/conversion-info/info", //项目信息审批
    "/myProject/approval/edit", //项目立项审批
    "/contract/add/add", //合同
    "/taskManage/manage-add/add", //任务
    "/myProject/archive-info/add", //项目归档
    "/myProject/information-info/details", //日周月
  ];
  // 如果没在列表当中，那么移除
  if (!allowedPaths.includes(to.path)) {
    Cookies.remove("activeSpTab");
    Cookies.remove("activeSpIndex");
  }
  next();
});

onMounted(async () => {
  const storedActiveName = Cookies.get("activeSpTab");

  if (storedActiveName) {
    activeName.value = storedActiveName; // 恢复活动标签
  }

  const storedActiveIndex = Cookies.get("activeSpIndex");

  // 从工作台跳转审批页面默认显示待我审批
  if (storedActiveIndex === "0") {
    searchType.value = "1";
  } else if (storedActiveIndex === "1") {
    searchType.value = "2";
  } else if (storedActiveIndex === "2") {
    searchType.value = "3";
  } else if (route.query.waite === "1") {
    searchType.value = "2";
    activeName.value = "2";
  } else {
    searchType.value = "1";
  }

  await getApprovalType();

  // setTimeout(() => {
  //   loading.value = false;
  // }, 500);
});
</script>
<style>
.el-tabs__header {
  padding: 10px 20px 0px 20px;
  position: relative;
}
</style>
<style lang="scss" scoped>
.information {
  padding: 20px;
}
.demo-tabs {
  background-color: #fff;
}
</style>
